<template>
	<div class="photo-container">
		<!-- 顶部分类列表 -->
		<div id="slider" class="mui-slider">
			  <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
						<a :class="['mui-control-item', itme.id == 0 ? 'mui-active' : '']" href="#" v-for="itme in PhotoLists" :key="itme.id" @tap="getPhotoCates(itme.id)">
							{{ itme.title }}
						</a>
					</div>
		     </div>
		</div>
		<!-- 图片列表区域 -->
		<ul class="photo-list">
		  <router-link tag="li" :to="'/home/photoDetails/' + item.id" v-for="item in PhotoCates" :key="item.id">
				<img v-lazy="item.img_url">
				<div>
					<p class="info-title">{{ item.title }}</p>
					<div class="info-body">{{ item.zhaiyao }}</div>
				</div>
		  </router-link>
		</ul>
	</div>
</template>

<script>
	import mui from "../../../lib/mui/js/mui.min.js";
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return {
				PhotoLists: [],
				PhotoCates: []
			}
		},
		methods: {
			getPhotoList(){
				this.$http.get("api/getimgcategory").then(res=>{
					if (res.body.status == 0) {
						this.PhotoLists = res.body.message;
						this.PhotoLists.unshift({title: "全部", id:0});
					} else {
						Toast('数据加载失败！');
					}
				})
			},
			getPhotoCates(id){
				this.$http.get(`api/getimages/${id}`).then(res=>{
					if (res.body.status == 0) {
						this.PhotoCates = res.body.message;
					} else {
						Toast('数据加载失败！');
					}
				})
			}
		},
		// 在dom元素刚创建好时触发,如果要操作dom元素,挂载在这里最好
		mounted(){
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			})
		},
		created(){
			this.getPhotoList();
			this.getPhotoCates(0);
		}
		
	}
</script>

<style scoped="scoped" lang="scss">
	* {
		touch-action: pan-y;
	}
	.photo-list{
		list-style: none;
		padding: 10px;
		margin: 0;
		li{
			background: black;
			opacity: .5;
			text-align: center;
			margin-bottom: 10px;
			box-shadow: 0 0 5px #0062CC;
			img{
				width: 100%;
			}
			img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
			}
			.info-title{
				font-size: 16px;
				color: white;
				text-align: left;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.info-body{
				font-size: 13px;
				text-align: left;
				color: white;
			}
		}
	}
</style>
